<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户注册</title>
    <div th:replace="common/link::header"></div>
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/login.css}" media="all">
</head>
<body>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-register" style="display: none;">
    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>用户注册</h2>
            <p>AI汇报助理</p>
        </div>
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">

            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="userName"></label>
                <input type="text" name="userName" id="userName" lay-verify="required" placeholder="账号" class="layui-input">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
                <input type="password" name="password" id="password" lay-verify="required|pass" placeholder="密码" class="layui-input">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="confirmPassword"></label>
                <input type="password" name="confirmPassword" id="confirmPassword" lay-verify="required|repass" placeholder="确认密码" class="layui-input">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-cellphone" for="phonenumber"></label>
                <input type="text" name="phonenumber" id="phonenumber" lay-verify="required" placeholder="手机号码" class="layui-input">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-email" for="email"></label>
                <input type="text" name="email" id="email" lay-verify="required" placeholder="用户邮箱" class="layui-input">
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <div class="layui-col-xs7">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"></label>
                        <input type="text" name="code" id="code" lay-verify="required" placeholder="验证码" class="layui-input">
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 10px;">
                            <button type="button" class="layui-btn layui-btn-primary" id="sendCode">发送验证码</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="register" style="background: #AA3130">注 册</button>
            </div>
        </div>
    </div>

    <div class="layui-trans layadmin-user-login-footer">
    </div>
</div>
<div th:replace="common/script::footer"></div>
<script th:inline="javascript">
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload'], function(){
        let $ = layui.$,
            form = layui.form,
            upload = layui.upload;

        // 初始化
        form.render();

        // 自定义验证规则
        form.verify({
            pass: [
                /^[\S]{8,16}$/
                ,'密码必须8到16位，且不能出现空格'
            ],
            repass: function(value) {
                if(value !== $('#password').val()) {
                    return '两次输入的密码不一致';
                }
            }
        });

        //提交
        form.on('submit(register)', function(obj) {
            // 打开loading
            let loading = layer.load(0, {
                shade: false,
                time: 2 * 1000
            });

            // 禁止重复点击按钮
            $('.layui-btn').attr("disabled",true);

            // 构建注册数据
            var registerData = {
                phonenumber: $('#phonenumber').val(),
                password: $('#password').val(),
                userName: $('#userName').val(),
                email: $('#email').val(),
                code: $('#code').val()
            };

            //请求注册接口
            $.ajax({
                type: 'POST',
                url:  ctx + '/system/sysUser/register',
                contentType: 'application/json',
                data: JSON.stringify(registerData),
                dataType: 'json',
                success: function(result) {
                    if (result.code === 200) {
                        layer.msg('注册成功', {
                            icon: 1
                            ,time: 1000
                        }, function(){
                            // 跳转到登录页面并显示权限提示
                            window.location.href = '/loginPage?message=请联系管理员授予权限';
                        });
                    } else {
                        layer.msg(result.message);
                        // 关闭loading
                        layer.close(loading);
                        // 开启点击事件
                        $('.layui-btn').attr("disabled", false);
                    }
                }
            });

            return false;
        });

        // 发送验证码
        $('#sendCode').on('click', function() {
            let email = $('#email').val();
            if (!email) {
                layer.msg('请输入邮箱地址');
                return;
            }

            // 禁用按钮并显示倒计时
            let countdown = 60;
            let $this = $(this);
            $this.addClass('layui-btn-disabled').attr('disabled', true);

            let timer = setInterval(function() {
                if (countdown <= 0) {
                    clearInterval(timer);
                    $this.removeClass('layui-btn-disabled').attr('disabled', false).text('发送验证码');
                } else {
                    $this.text(countdown + '秒后重发');
                    countdown--;
                }
            }, 1000);

            // 发送验证码请求
            $.ajax({
                type: 'GET',
                url: ctx + '/system/sysUser/send',
                data: {toEmail: email},
                dataType: 'json',
                success: function(result) {
                    if (result.code === 200) {
                        layer.msg('验证码已发送到邮箱');
                    } else {
                        layer.msg(result.message);
                        clearInterval(timer);
                        $this.removeClass('layui-btn-disabled').attr('disabled', false).text('发送验证码');
                    }
                }
            });
        });
    });
</script>
</body>
</html>